<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>解忧栈-你心中理想的港湾</title>
		<!-- 引入 Bootstrap -->
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<link href="css/iconfont.css" rel="stylesheet" type="text/css"/>
		<link href="css/fileUpload.css" rel="stylesheet" type="text/css">
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script type="text/javascript" src="js/fileUpload.js"></script>
	</head>
	<body>
		<div class="container">
			<!--1.头  -->	
			<div class="col-lg-12">
				<nav class="navbar navbar-default" role="navigation">
					<div class="navbar-header col-lg-4">
					   <img src="images/logo.PNG" style="height: 60px;"/>
					</div>
					<div class="col-lg-offset-4 col-lg-4">
						<ul class="nav navbar-nav">
							<li ><a href="index.html">首页</a></li>
							<li ><a href="circlelist.html">圈子</a></li>
							<li class="active"><a href="worried.html">忧虑</a></li>
							<li><a href="about.html">关于</a></li>
						</ul>
					</div>
				</nav>
			</div>
			<!-- 2、面包屑导航 -->
			<div class="col-lg-12">
				<ul class="breadcrumb">
				    <li><a href="index.html">首页</a></li>
				    <li><a href="worried.html">忧虑</a></li>
				    <li class="active">新增忧虑</li>
				</ul>
			</div>
			<!-- 新增表单 -->
			
			<div class="col-lg-12" id="dvdata">
				<form role="form">
					<div class="form-group">
					  <label for="title">圈子</label>
					  <select v-model="worried.cid">
						  <option v-for="c in circles" :value="c.id">{{c.title}}</option>
					  </select>
					  
					</div>
					<div class="form-group">
					  <label for="pass">口令</label>
					  <input type="password" class="form-control" id="pass" placeholder="请输入名称" v-model="worried.pass">
					</div>
					
				  <div class="form-group">
				    <label for="title">名称</label>
				    <input type="text" class="form-control" id="title" placeholder="请输入名称" v-model="worried.title">
				  </div>
				  <div class="form-group">
				    <label for="info">详情</label>
				    <input type="text" class="form-control" id="info" placeholder="请输入简介" v-model="worried.info">
				  </div>
				  <div class="form-group">
				   <div id="fileUploadContent" class="fileUploadContent"></div>
				     <button class="btn btn-primary" onclick="testUpload()">提交</button>
				  </div>
				  <button type="button" class="btn btn-primary btn-lg btn-block">发布忧虑</button>
				</form>
			</div>
		</div>
		<script type="text/javascript">
		    $("#fileUploadContent").initUpload({
		        "uploadUrl":"#",//上传文件信息地址
		        //"size":350,//文件大小限制，单位kb,默认不限制
		        //"maxFileNumber":3,//文件个数限制，为整数
		        //"filelSavePath":"",//文件上传地址，后台设置的根目录
		        "beforeUpload":beforeUploadFun,//在上传前执行的函数
		        //"onUpload":onUploadFun，//在上传后执行的函数
		        //autoCommit:true,//文件是否自动上传
		        "fileType":['png','jpg','PNG','jpeg']//文件类型限制，默认不限制，注意写的是文件后缀
		    });
		    function beforeUploadFun(opt){
		        opt.otherData =[{"name":"name","value":"zxm"}];
		    }
		    function onUploadFun(opt,data){
		        alert(data);
		        uploadTools.uploadError(opt);//显示上传错误
		        uploadTools.uploadSuccess(opt);//显示上传成功
		    }
		    
		    
		    function testUpload(){
		    	var opt = uploadTools.getOpt("fileUploadContent");
		    	uploadEvent.uploadFileEvent(opt);
		    }
			var vm=new Vue({
				el:"#dvdata",
				data:{
					worried:{
						cid:0,
						title:"",
						content:"",
						pass:"",
						
					},
					circles:[
						{
							id:1,
							title:"圈子-2008"
						}
					]
				}
			})
		</script>
	</body>
</html>
